<template>
    <div class="msg-box">
        <div class="left-box">
            <!--  :openMsgSetDrawer="openMsgSetDrawer" -->
            <MessageList v-if="isMsgList" :openChatSearch="openChatSearch" :openChat="openChat" :openAddressBook="openAddressBook" />
            <ChatSearch v-if="isChatSearch" :openChat="openChat" :isBack="true" :closeChatSearch="closeChatSearch" />
        </div>
        <div class="right-box">
            <ChatComp ref="chatCompRef" />
            <AddressBook v-if="isAddressBook" :openChat="openChat" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import MessageList from '@/views/message/components/MessageList.vue'
import AddressBook from '@/views/message/components/AddressBook.vue'
import ChatSearch from '@/views/message/components/ChatSearch.vue'
import ChatComp from '@/views/message/components/ChatComp.vue'

const isMsgList = ref<boolean>(true)
// 打开讯息搜索窗口
const openMsgList = () => {
    isChatSearch.value = true
}

const isChatSearch = ref<boolean>(false)
// 打开讯息搜索窗口
const openChatSearch = () => {
    isChatSearch.value = true
    isMsgList.value = false
}
const closeChatSearch = () => {
    isChatSearch.value = false
    isMsgList.value = true
}

const isChat = ref<boolean>(false)
const chatCompRef = ref()
// 打开聊天窗口
const openChat = (id, info) => {
    isChat.value = true
    isAddressBook.value = false
    chatCompRef.value.initDialog(id, info)
}

const isAddressBook = ref<boolean>(false)
// 打开通讯录窗口
const openAddressBook = () => {
    isAddressBook.value = true
    isChat.value = false
}
</script>

<style lang="less" scoped>
.msg-box {
    border: 1px solid #d5d5d5;
    height: 750px;

    display: flex;

    .left-box {
        border-right: 1px solid #d5d5d5;
        width: 33.33% !important;

        display: flex;
        flex-direction: column;
    }

    .right-box {
        width: 66.66% !important;
        background-color: #eff1f3;
        margin-left: 0 !important;
        display: flex;
        flex-direction: column;
    }
}
</style>
